<template>
	<div style="margin: 20px;">
        <div>
            <Row style="margin-bottom: 25px;">
                <Col span="5" style="margin-right: 20px; width: 15%">
                    <RadioGroup type="button" v-model="rankType">
                        <Radio label="0">班级排名</Radio>
                        <Radio label="1">年级排名</Radio>
                    </RadioGroup>
                </Col>
                <Col span="5" style="margin-right: 20px; width: 15%">
                    <RadioGroup type="button" v-model="sortType">
                        <Radio label="0">升序</Radio>
                        <Radio label="1">降序</Radio>
                    </RadioGroup>
                </Col>
                <Col span="8"><Button type="primary" shape="circle" icon="ios-search" @click="search()">搜索</Button></Col>
            </Row>
        </div>            
        <div>
            <ul>
                <li>
                    <div style="padding: 10px 0;">
                    	<Table border :columns="resultColumns" :data="resultData" :height="400" @on-selection-change="s=>{change(s)}"></Table>
                    </div> 
                </li>
                <li>
                    <div style="text-align: right;">
                        <Page :total="total" :page-size="pageInfo.pageSize" show-elevator show-total @on-change="e=>{pageSearch(e)}"></Page>
                    </div>  
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
	export default {
        data () {
            return {
            	/*选择的数量*/
                count:null,
            	/*选中的组数据*/
                groupId:null,
            	/*新建modal的显示参数*/
                newModal:false,
            	/*分页total属性绑定值*/
                total:0,
                /*loading*/
                loading: true,
                /*pageInfo实体*/
                pageInfo:{
                	page:0,
                	pageSize:10,
                    courseNum:0,
                    sortType:0
                },
                sortType: 0,
                rankType: 0,
            	/*生产类型表显示字段*/
            	resultColumns: [
                    {
                        type: 'selection',
                        width: 50,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        type: 'index',
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'studentName'
                    },
                    {
                        title: '语文',
                        key: 'chinese'
                    },
                    {
                        title: '数学',
                        key: 'math'
                    },
                    {
                        title: '英语',
                        key: 'english'
                    },
                    {
                        title: '物理',
                        key: 'physical'
                    },
                    {
                        title: '化学',
                        key: 'chemistry'
                    },
                    {
                        title: '政治',
                        key: 'political'
                    },
                    {
                        title: '生物',
                        key: 'biological'
                    },
                    {
                        title: '总分',
                        key: 'total'
                    },
                    {
                        title: '班级排名',
                        key: 'classRank'
                    },
                    {
                        title: '年级排名',
                        key: 'gradeRank'
                    }
                ],
                /*生产类型表数据*/
                resultData: []
            }
        },
        mounted(){
        	/*页面初始化调用方法*/
            this.getTable(this.pageInfo);
        },
        methods:{
        	/*pageInfo实体初始化*/
        	initPageInfo(){
        		this.pageInfo.page = 0;
        		this.pageInfo.pageSize = 10;
                this.pageInfo.rankType = 0;
                this.pageInfo.sortType = 0;
        	},
            /*得到表数据*/
            getTable(e) {
                let sort = '';
                if (e.rankType == 0 && e.sortType == 0) {
                    sort = 'class_rank,ASC';
                } else if (e.rankType == 0 && e.sortType == 1) {
                    sort = 'class_rank,DESC';
                } else if (e.rankType == 1 && e.sortType == 0) {
                    sort = 'grade_rank,ASC';
                } else if (e.rankType == 1 && e.sortType == 1) {
                    sort = 'grade_rank,DESC';
                }
                this.axios({
                    method: 'get',
                    url: '/result',
                    params: {
                        page: e.page,
                        size: e.pageSize,
                        sort: sort
                    }
                }).then(function (response) {
                    this.resultData = response.data.data;
                    this.total = response.data.totalCount;
                }.bind(this)).catch(function (error) {
                    alert(error);
                });
            },
            /*搜索按钮点击事件*/
            search(){
                this.initPageInfo();
                this.pageInfo.rankType = this.rankType;
                this.pageInfo.sortType = this.sortType;
                this.getTable(this.pageInfo);
            },
            /*分页点击事件*/
            pageSearch(e){
                this.pageInfo.page = e-1;
                this.getTable(this.pageInfo);
            },
            /*table选择后触发事件*/
            change(e){
                if(e.length==1){
                    this.menuModifySet(e['0']);
                }
                this.setGroupId(e);              
            },
            /*通过选中的行设置groupId的值*/
            setGroupId(e){
                this.groupId=[];
                this.count=e.length;
                for (var i = 0; i <= e.length - 1; i++) {
                    this.groupId.push(e[i].id);
                }
            }
        }
    }
</script>